<template>
    <div class="addProd" ref="doms" id="doms">
        <div class="box flex-b">
            <div class="left">
                <div class="prod-title flex-a" id="basic">
                    <div class="basic">{{ id ? '修改寄养' : '新增寄养' }}</div>
                    <el-button type="warning" style="padding:12px 50px;margin-left: 10px;" class="btn-plain"
                        @click="back">返回上一页</el-button>
                </div>
                <div class="prod-title flex-a" style="margin-top: 40px;">
                    <div class="basic">客户类型</div>
                </div>
                <div class="prod-content">
                    <el-form ref="form" :model="form" :inline="true">
                        <el-form-item>
                            <el-radio v-model="form.type" label="1">会员</el-radio>
                            <el-radio v-model="form.type" label="2">散客</el-radio>
                        </el-form-item>
                        <div class="flex-a input">
                            <el-form-item label="查询会员" v-if="form.type == 1">
                                <el-select v-model="form.vipNo" placeholder="请选择">
                                    <el-option v-for="item in vipList" :label="item.name" :value="item.no"
                                        :key="item.no"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="客户姓名">
                                <el-input v-model="form.vipName" placeholder="请输入客服姓名" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="联系电话">
                                <el-input v-model="form.vipPhone" placeholder="请输入联系电话" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="prod-title flex-a">
                    <div class="basic">基础信息</div>
                </div>
                <div class="prod-content">
                    <el-form ref="form" :model="form" class="input">
                        <el-form-item label="销售员">
                            <el-select v-model="form.cashier" placeholder="请选择">
                                <el-option v-for="item in cashierList" :label="item.staffName" :value="item.id + ''"
                                    :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="寄养时间">
                            <el-date-picker v-model="form.time" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="prod-title flex-a" id="more">
                    <div class="basic">寄养宠物</div>
                </div>
                <div class="prod-content">
                    <div class="add-foster">
                        <el-form ref="form" :model="form" class="input">
                            <el-form-item label="寄养单价/天">
                                <el-input v-model="form.price" class="input input-radius-right" placeholder="请输入寄养单价"
                                    clearable>
                                    <template slot="append">元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="寄养宠物" v-if="form.type == 1">
                                <el-select v-model="form.ids" multiple placeholder="请选择" @change="selectPet">
                                    <el-option v-for="item in petList" :label="item.name" :value="item.id"
                                        :key="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <div v-if="form.type == 2">寄养宠物<el-button type="primary"
                                    style="margin-left: 5px;padding: 7px 20px;" class="btn" @click="addPet">添加宠物</el-button>
                            </div>
                        </el-form>
                        <div class="pet-list flex" v-if="form.type == 1">
                            <div class="pet-item input" v-for="item in petInfoList" :key="item.id">
                                <div class="head flex-a">
                                    <div><img :src="item.url || require('@/assets/images/pet.png')" alt=""></div>
                                    <div>
                                        <div><span>{{ item.name }}</span><span>{{ item.sex == 1 ? '弟弟' : '妹妹' }}</span>
                                        </div>
                                        <div class="flex-a">
                                            <span>{{ item.varNo }}</span><i></i><span>{{ item.date }}</span><i></i>
                                            <span>{{item.weight }}kg</span><i></i><span>{{ item.isSter == 1 ? '已绝育' : '未绝育'}}</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="flex-a pad-l">
                                    <span>用餐习惯</span>
                                    <el-select v-model="form.region" placeholder="请选择用餐习惯">
                                        <el-option label="一日一餐" value="10"></el-option>
                                    </el-select>
                                </div>
                                <div class="flex-a pad-l">
                                    <span>排便习惯</span>
                                    <el-radio v-model="form.radio" label="1">早上</el-radio>
                                    <el-radio v-model="form.radio" label="2">中午</el-radio>
                                    <el-radio v-model="form.radio" label="2">晚上</el-radio>
                                </div>
                                <div class="flex-a pad-l">
                                    <span>其他习惯</span>
                                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                                        placeholder="比较粘人，需要陪玩较多。" v-model="form.textarea2">
                                    </el-input>
                                </div> -->
                            </div>
                        </div>
                        <div v-if="form.type == 2">
                            <div v-for="(item, index) in fosterPets" :key="item.id" class="foster-pet">
                                <div>第{{ index + 1 }}只宠物<el-button type="primary"
                                        style="margin-left: 5px;padding: 7px 20px;" class="btn"
                                        @click="delPet(index)">删除宠物</el-button></div>
                                <el-form ref="form" :model="item" class="input" :inline="true">
                                    <el-form-item label="宠物名称">
                                        <el-input v-model="item.name" placeholder="请输入宠物名称" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="宠物品种">
                                        <el-input v-model="item.varNo" placeholder="请输入宠物品种" clearable></el-input>
                                    </el-form-item>
                                    <el-form-item label="绝育情况">
                                        <el-select v-model="item.isSter" placeholder="请选择">
                                            <el-option label="已绝育" value="1"></el-option>
                                            <el-option label="未绝育" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="宠物体重">
                                        <el-input v-model="item.weight" class="input input-radius-right"
                                            placeholder="请输入宠物体重" clearable>
                                            <template slot="append">kg</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="肩高/体长">
                                        <el-input v-model="item.high" class="input input-radius-right"
                                            placeholder="请输入肩高/体长" clearable>
                                            <template slot="append">cm</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="宠物性别">
                                        <el-select v-model="item.sex" placeholder="请选择">
                                            <el-option label="弟弟" value="1"></el-option>
                                            <el-option label="妹妹" value="2"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <!-- <el-form-item label="宠物习惯">
                                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                                            placeholder="比较粘人，需要陪玩较多。" v-model="form.remark">
                                        </el-input>
                                    </el-form-item> -->
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <el-button type="primary" style="padding:12px 71px" class="btn" @click="onSubmit">提交</el-button>
                    <el-button type="warning" style="padding:12px 50px" class="btn-plain" @click="back">返回上一页</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { addFoster, getByVipNo, addFosterPet, getFoster, updateFoster } from '../../../api/pet/foster';
import { getMap } from "@/api/pet/cashier";
import { getVipMap } from "@/api/pet/pets";
export default {
    name: "addProd",
    data() {
        return {
            id: '',
            form: {
                type: '1',
                ids: [],
                list: []
            },
            suitPetTypes: [
                {
                    label: '猫用',
                    value: 1
                },
                {
                    label: '狗用',
                    value: 2
                },
                {
                    label: '猫狗通用',
                    value: 3
                },
                {
                    label: '小宠',
                    value: 4
                },
                {
                    label: '其他',
                    value: 5
                }
            ],//宠物类型
            target: 0,
            cashierList: [],
            vipList: [],
            petList: [],
            fosterPets: [],
            petInfoList: []
        };
    },
    created() {
        getMap().then(res => {
            if (res.code == 200) {
                this.cashierList = res.data
                if (this.$route.query.id) {
                    this.id = this.$route.query.id
                    getFoster(this.$route.query.id).then(res => {
                        if (res.code == 200) {
                            this.form = res.data
                            this.form.time = [res.data.beginDate, res.data.endDate]
                            this.form.type = res.data.vipNo == '散客' ? '2' : '1'
                            if (res.data.vipNo == '散客') {
                                this.fosterPets = res.data.list
                            } else {
                                let list = res.data.list, ids = []
                                this.petInfoList = list
                                list.forEach(item => {
                                    ids.push(item.petId)
                                })
                                this.form.ids = ids
                            }

                        }
                    })
                }
            }
        })
        this.getVipList()
    },
    watch: {
        'form.vipNo': {
            handler(newVal, oldVal) {
                this.getByVipNo(newVal)
            },
            deep: true
        },
    },
    mounted() {

    },
    methods: {
        getVipList() {
            getVipMap().then(res => {
                if (res.code == 200) {
                    this.vipList = res.data
                }
            })
        },
        //寄养宠物
        getByVipNo(vipNo) {
            getByVipNo(vipNo).then(res => {
                if (res.code == 200) {
                    this.petList = res.data
                }
            })
        },
        addPet() {
            this.fosterPets.push({})
        },
        delPet(index) {
            this.fosterPets.splice(index, 1)
        },
        selectPet(ids) {
            let list = []
            ids.forEach(item => {
                this.petList.forEach(ele => {
                    if (item == ele.id) {
                        list.push(ele)
                    }
                })

            })
            this.petInfoList = list
        },
        // 返回上一页
        back() {
            this.$router.back()
        },
        //表单提交
        onSubmit() {
            if ((this.fosterPets.length > 0 && this.form.type == 2) || (this.petInfoList.length > 0 && this.form.type == 1)) {
                if (this.id) {
                    delete this.form.ids
                    this.form.list =this.form.type == 1?this.petInfoList: this.fosterPets
                    updateFoster(this.form).then(response => {
                        this.$modal.msgSuccess("编辑成功");
                    });
                    this.back()
                } else {
                    this.form.beginDate = this.form.time[0]
                    this.form.endDate = this.form.time[1]
                    this.form.list = this.fosterPets
                    delete this.form.time
                    if (this.form.type == 1) {
                        this.form.ids = this.form.ids.join(',')
                        addFoster(this.form).then(response => {
                            this.$modal.msgSuccess("添加成功");
                        });
                        this.back()
                    } else if (this.form.type == 2) {
                        delete this.form.ids
                        addFosterPet(this.form).then(res => {
                            this.$modal.msgSuccess("添加成功");
                            this.back()
                        })
                    }
                }
            } else {
                this.$message({
                    message: '至少添加1条宠物',
                    type: 'warning'
                });
            }

        },
    }
};
</script>
<style scoped lang="scss">
.box {
    position: relative;

    .left {
        width: 100%;
    }

    .right {
        ul {
            list-style: none;
            height: 300px;
            border-left: 2px solid #E4E7ED;
            position: fixed;
            right: 40px;
            top: 200px;
            padding-left: 0;
        }

        li {
            padding: 0 20px;
            height: 40px;
            box-sizing: border-box;
            line-height: 40px;
            list-style: none;
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            position: relative;
            left: -2px;
            box-sizing: border-box;
            border-left: 2px solid transparent;
        }

        li:hover {
            cursor: pointer;
            color: #409eff;
        }

        li.active {
            color: #409eff;
            border-color: #409eff;
        }
    }

    .prod-title {
        .basic {
            font-size: 18px;
            color: #333336;
            font-weight: 700;

            span {
                color: #409eff;
                font-size: 12px;
                font-weight: normal;
                margin: 0 20px 0 5px;
            }
        }
    }

    .prod-content {
        margin-top: 20px;

        .add-foster {
            border: 1px solid #E6E6E6;
            border-radius: 10px;
            padding: 20px 20px 40px;

            .pet-list {
                .pet-item {
                    overflow: hidden;
                    position: relative;
                    padding: 20px;
                    margin: 12px 20px 12px 0;
                    width: calc(25% - 20px);
                    min-width: 398px;
                    background: #f9f9f9;
                    border-radius: 12px;

                    .head {
                        margin-bottom: 0;

                        img {
                            height: 50px;
                            width: 50px;
                            border-radius: 50%;
                            background: #c0c4cc;
                            margin-right: 10px;
                        }

                        span {
                            margin-right: 10px;
                            white-space: nowrap;
                        }

                        i {
                            width: 2px;
                            height: 15px;
                            display: inline-block;
                            background-color: #c0c4cc;
                            margin-right: 10px;
                        }
                    }

                    div.pad-l {
                        margin-left: 70px;

                        span {
                            white-space: nowrap;
                            margin-right: 10px;
                        }

                        div {
                            margin: 0;
                        }
                    }
                }
            }

            .foster-pet {
                border: 1px solid #f9f9f9;
                padding: 20px;
                background: #f9f9f9;
                border-radius: 12px;
                line-height: 60px;
                margin-bottom: 20px;

                div {
                    margin-bottom: 0;
                }

                .el-form {
                    width: 62%;
                }

                .el-form-item {
                    width: 32%;
                    white-space: nowrap;
                }
            }
        }

        div {
            margin-bottom: 15px;

            .mr {
                margin-right: 10px;
            }

            p {
                color: #000000;
                font-size: 14px;

                span {
                    color: #b3b3b3;
                    font-size: 12px;
                }
            }

            .el-input {
                width: 240px;
            }

            .select {
                margin-left: 10px;
                width: 80px;
            }

            .el-textarea {
                width: 500px;
            }

            .el-button.btn {
                margin-left: 10px;
            }

            .tip {
                display: inline-block;
                font-size: 12px;
                color: #333336;
                margin-left: 5px;

                span {
                    color: #409eff;
                }

                span:hover {
                    cursor: pointer;
                }
            }

        }

        .flex {
            p {
                margin-top: 0 !important;
            }
        }

        .suggest {
            span {
                color: rgb(245, 108, 108);
                font-size: 12px;
            }
        }
    }
}
</style>
